import apiTool, {
  getSize,
  getUserInfoUrl,
  getUserTypeValue,
  phoneClick,
} from "@/command/apiTool";
import { defineComponent, reactive } from "vue";
import PageTitle from "@/components/PageTitle";
import PageImgTitle from "@/components/PageImgTitle";
// import { useRequest } from "./request";
import CardView from "@/components/CardView";
import ListView from "@/components/ListView";
import { IFilterMenuChoose } from "@/components/FilterMenu/types";
import ButtonGroupView from "@/components/ButtonGroupView";
import { IButtonGroupViewData } from "@/components/ButtonGroupView/types";
import GreyBlock from "@/components/GreyBlock";
import RoundInfo from "@/components/RoundInfo";
import TextView from "@/components/TextView";
import RowView from "@/components/RowView";
import RoundEdgeButtonGroup from "@/components/RoundEdgeButtonGroup";
import { ITextGroupPropsData } from "@/components/TextGroups/types";
import FilterMenuSearch from "@/components/FilterMenuSearch";
import ColView from "@/components/ColView";
import vueRouter from "@/router";
export default defineComponent({
  setup(props, {}) {
    // const { list } = useRequest();
    // const menuList = [
    //   {
    //     title: "区域",
    //   },
    //   {
    //     title: "农产品",
    //   },
    //   {
    //     title: "检测结果",
    //   },
    //   {
    //     title: "日期",
    //   },
    // ];
    const data: IFilterMenuChoose[] = [
      { type: "area", key: "areaCode" },
      { type: "productType", key: "productId", title: "农产品" },
      // {
      //   comType: "single",
      //   key: "time",
      //   title: "检测结果",
      //   data: [{ text: "统一", value: 1 }],
      // },
      { type: "datePicker", key: "time", title: "日期" },
    ];
    const form = reactive({ keyWord: "" });
    const renderItem = (e: any) => {
      const buttons: IButtonGroupViewData[] = [
        {
          text: "联系小户",
          type: "primary",
          plain: true,
          onClick: () => {
            phoneClick(e.phone);
          },
        },
      ];
      const buttons2: IButtonGroupViewData[] = [
        {
          text: "联系大户",
          type: "primary",
          plain: true,
          onClick: () => {
            phoneClick(e.phone);
          },
        },
        // {
        //   text: "查看结果",
        //   type: "primary",
        //   color: "linear-gradient(90deg, #1989FA 0%, #73B9FF 100%)",
        //   onClick: () => {
        //     vueRouter.push("/detectionResult");
        //   },
        // },
      ];
      const data: ITextGroupPropsData[] = [
        {
          display: getUserTypeValue() == "dh",
          name: "检测农产品",
          value: e.product,
          width: "40%",
        },
        {
          display: getUserTypeValue() == "dh",
          name: "检测结果",
          value: e.state,
          width: "40%",
        },
        {
          display: getUserTypeValue() !== "dh",
          name: "检测结果",
          value: e.state,
        },
      ].filter((e: any) => e.display);
      return (
        <ColView class="w-full">
          <RoundInfo
            src={getUserTypeValue() == "dh" ? e.logo : ""}
            title={
              getUserTypeValue() == "dh"
                ? e.farmerName
                : `检测农产品: ${e.product}`
            }
            data={data}
          />
          <GreyBlock class="mt-[12px]">
            <RowView class="justify-between flex-1">
              <RowView>
                <TextView>{e.orderDate}</TextView>
              </RowView>
              {getUserTypeValue() == "dh" && (
                <ButtonGroupView
                  data={buttons}
                  class={"flex !justify-end w-[130px] max-sm:w-[170px]"}
                />
              )}
              {getUserTypeValue() !== "dh" && (
                <RoundEdgeButtonGroup data={buttons2} />
              )}
            </RowView>
          </GreyBlock>
        </ColView>
      );
    };
    const render2 = () => {
      return (
        <CardView radius={0}>
          <FilterMenuSearch choose={data} v-model={form} searchKey="name" />
          <ListView
            {...getUserInfoUrl({
              dh: "/api/h5/richInspection/lager/queryApplyHistory",
              xh: "/api/h5/richInspection/small/queryApplyHistory",
            })}
            type="page"
            renderItem={renderItem}
            class={"mt-[20px]"}
            itemHeight={120}
            params={form}
          />
        </CardView>
      );
    };
    return () => (
      <PageImgTitle
        title="检测记录"
        bgColor={apiTool.getBackGroundColor()}
        childClass={"m-child-top-20 "}
      >
        {render2()}
      </PageImgTitle>
    );
  },
});
